<template>
  <view class="container flex-column">
    <view class="padding-top-40 padding-bottom-40 width-full flex-row flex-item">
      <view class="chart-box flex-column" :style="{height}" style="width:630rpx;" :class="{relative:!showData}">
        <qiun-data-charts
          v-show="showData"
          class="chart-box flex-column flex-item"
          type="column"
          :style="{height}"
          :opts="options"
          :localdata="localdata"
          :canvas2d="true"
          :loading-type="5"
          canvas-id="tBaBaDriverFullCharts"
        />
        <view v-show="!showData" class="no-data flex-column flex-center">
          <image class="no-data-image margin-bottom-30 block" src="https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/static/no_data_data.png" />
          <text class="text-30 color-t3">暂无数据</text>
        </view>
      </view>

      <view style="width:120rpx;" />
    </view>

    <view class="flex-column title">
      <view class="flex-item flex-column justify-between align-center">
        <view class="flex-row align-center rotate">
          <image class="block title-icon" src="https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/icon/icon_title_full.svg" />
          <text class="text-36 color-t1 text-bold title-text">{{ data.title }}</text>
        </view>
        <image src="https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/icon/icon_zoom_out_column.png" class="block full-screen" @click="jump" />
      </view>
    </view>

    <safe-area-bottom />
  </view>
</template>

<script>
import options from './index'
export default {
  name: 'Driver',
  data() {
    return {
      data: {},
      localdata: [],
      options,
      showData: true,
      length: 0
    }
  },
  onLoad(e) {
    this.data = e
    const data = JSON.parse(e.data)
    this.length = data.length
  },
  computed: {
    height() {
      if (this.length > 15) return this.length * 100 + 'rpx'
      else return ''
    }
  },
  mounted() {
    setTimeout(() => {
      this.localdata = JSON.parse(this.data.data)
      this.showData = !!this.localdata.length
    }, 300)
  }
}
</script>

<style scoped lang="scss">
@import "../index";

.no-data{
  position:absolute;
  top:50%;
  left:50%;
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
}
.no-data-image{
  width:440rpx;
  height:368rpx;
}
.title{
  width:120rpx;
  @include position(fixed,30rpx,0,40rpx);
}
.rotate{
  transform: rotate(90deg) translateX(76rpx);
}
.title-icon{
  width:28rpx;
  height:24rpx;
  margin-right:16rpx;
}
.title-text{
  white-space: nowrap;
}
.full-screen{
  width:44rpx;
  height:64rpx;
}
</style>
